<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    权值的计算:
<!-- 2.1. 第一等级: 代表 内联样式; 如 style="", 权值为 1,0,0,0 。
2.2. 第二等级: 代表 ID选择器; 如 #id="", 权值为 0,1,0,0 。
2.3. 第三等级: 代表 class | 伪类 | 属性 选择器; 如 .class | :hover,:link,:target | [type], 权值 0,0,1,0 。
2.4. 第四等级: 代表 标签 | 伪元素 选择器; 如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1 。
2.5. 通用选择器 (\*), 子选择器(>), 相邻同胞选择器(+) 等选择器不在4等级之内, 所以它们的权值都为 0,0,0,0 。 -->

<!-- !important - 无穷大 -->

    <style>
        div.c1{
            color: green;
        }

        .c1{
            color: red;
        }
    </style>
</head>
<body>
    <div class="c1" id="outer">
        div
    </div>
    <p class="c1">
        p-c1
    </p>
</body>
</html>